<template>
    <div class="card" :style="showCardBackColor ? '' : `background:none`">
        <div class="card-img" :style="showTitleBack ? '' : `background:none`">
            <span class="card-title" v-if="showTitle">
                <!-- 卡片标题 -->
                <div class="title-text">
                    {{ scrapeDataTitle }}
                </div>
                <!-- 详情按钮 -->
                <slot name="detailButton"></slot>
            </span>
        </div>
        <div class="card-container">
            <!-- 卡片内容,插入图表 -->
            <slot></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
import { toRefs } from "vue"
const props = defineProps({
    scrapeDataTitle: {
        type: String,
        default: '卡片标题'
    },
    showTitle: {
        type: Boolean,
        default: true
    },
    showTitleBack: {
        type: Boolean,
        default: true
    },
    showCardBackColor: {
        type: Boolean,
        default: false
    }
})

const { scrapeDataTitle, showTitle, showTitleBack, showCardBackColor } = toRefs(props)
</script>

<style lang="scss" >
.card {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #051726FF;

    .card-img {
        width: 100%;
        height: clamp(3rem, 2.5vw, 6rem);
        background: url('../../assets/image/dashboard/小标题.png') no-repeat center;
        background-size: 100% 100%;

        object-fit: fill;
        display: flex;
        align-items: center;

        .card-title {
            padding-left: 22px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: clamp(1rem, 0.83vw, 2rem);
            box-sizing: border-box;

            .title-text {
                font-weight: bold;
                color: #DAEFFF;
                text-shadow: 0px 2px 4px #0D7DE4;
                font-size: clamp(1rem, 0.83vw, 2rem);
            }


        }
    }

    .card-container {
        width: 100%;
        height: calc(100% - 48px);
    }

}
</style>